<template>
  <a-row type="flex" class="house-detail">
    <a-row type="flex" justify="space-between" :gutter="10" style="width: 100%">
      <a-col flex="400px">
        <img
          src="http://localhost:8090/images/house/image/1.webp"
          width="400"
          height="250"
          style="object-fit: cover"
        />
      </a-col>
      <a-col flex="auto">
        <a-row type="flex" justify="center" class="detail">
          <p class="title">{{ house.title }}</p>
        </a-row>
      </a-col>
    </a-row>
    <a-row>
      <div class="my-tag">
        <p class="label">房屋配套</p>
        <a-tag
          v-for="({ id, desc }, k) in matching"
          :key="k"
          :color="setColor(id)"
          :style="`color: ${setColor(id) == '' ? '#cccccc' : ''}`"
          >{{ desc }}</a-tag
        >
      </div>
    </a-row>
    <a-row>
      <p class="label">房屋描述</p>
      {{ house.desc }}
    </a-row>
  </a-row>
</template>
<script>
import { indexOf, random } from "lodash";

export default {
  name: "HouseDetail",
  layout: "MainLayout",
  data() {
    return {
      house: {},
      matching: [],
      colors: ["pink", "red", "orange", "green", "cyan", "blue", "purple"]
    };
  },
  computed: {
    setColor() {
      return id => {
        const { house, colors } = this;
        const res = indexOf(house.matching, id.toString());
        return res == -1 ? colors[random(0, 6)] : "";
      };
    }
  },
  watch: {
    "$store.state.house.matching": {
      handler(nval) {
        this.matching = nval;
      },
      deep: true
    }
  },
  methods: {},
  async asyncData(ctx) {
    const house = JSON.parse(ctx.route.query.house);
    const matching = house.matchingId.split(",");
    delete house.matchingId;
    house.matching = matching;
    return { matching: ctx.store.state.house.matching, house };
  }
};
</script>
<style lang="less" scoped>
.house-detail {
  margin: auto !important;
  width: 70%;
  padding: 10px;
  .my-tag {
    margin: 20px 0px;
    /deep/ .ant-tag {
      padding: 10px 12px;
      font-size: 20px;
      margin: 0px 10px 10px 0px;
    }
  }
  .label {
    font-size: 20px;
    font-weight: bold;
  }
  .detail {
    .title {
      font-size: 25px;
    }
  }
}
</style>
